<template>
    <el-card>
        <div>
            <div ref="chartContainer" style="width: 100%; height: 78vh;"></div>
        </div>
    </el-card>
</template>
  
<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import 'echarts-gl';
import { holeList } from "@/utils/holeDemo.js";

const chartContainer = ref(null);

onMounted(() => {
    renderChart(holeList);
});

const renderChart = (dataRows) => {
    const data = [];
    let dataCasingOne = [];
    let dataCasingTwo = [];
    let dataCasingThree = [];

    dataRows.forEach(element => {
        const x = element.X;
        const y = element.Y;
        const z = -element.Z;
        data.push([x, y, z]);
    });

    dataCasingOne = data.filter(e => e[2] > -160);
    dataCasingTwo = data.filter(e => e[2] > -800);
    dataCasingThree = data.filter(e => e[2] > -1300);

    const chart = echarts.init(chartContainer.value);
    const option = {
        tooltip: {},
        backgroundColor: '#fff',
        visualMap: {
            show: false,
            dimension: 5,
            inRange: {},
        },
        xAxis3D: {
            type: 'value',
        },
        yAxis3D: {
            type: 'value',
        },
        zAxis3D: {
            type: 'value'
        },
        grid3D: {
            viewControl: {
                projection: 'orthographic',
            },
            width: '50%',
        },
        grid: [
            { left: '50%', width: '30%', bottom: '57%' },
            { left: '75%', width: '30%', bottom: '57%' },
            { left: '75%', width: '30%', top: '57%' },
        ],
        xAxis: [
            {
                type: 'value',
                gridIndex: 0,
                name: 'X',
                axisLabel: { rotate: 50, interval: 0 }
            },
            {
                type: 'value',
                gridIndex: 1,
                name: 'X',
                axisLabel: { rotate: 50, interval: 0 }
            },
            {
                type: 'value',
                gridIndex: 2,
                name: 'Y',
                axisLabel: { rotate: 50, interval: 0 }
            }
        ],
        yAxis: [
            { type: 'value', gridIndex: 0, name: 'Y' },
            { type: 'value', gridIndex: 1, name: 'Z' },
            { type: 'value', gridIndex: 2, name: 'Z' },
        ],

        series: [
            {
                type: 'line3D',
                data: data,
                name: "井眼轨迹",
                // 变得圆滑
                smooth: true,
                // 隐藏折点
                showSymbol: false,
                lineStyle: {
                    width: 8,
                    color: '#000000',
                },
            },
            {
                type: 'line3D',
                data: dataCasingOne,
                // 变得圆滑
                smooth: true,
                // 隐藏折点
                showSymbol: false,
                name: "一开套管",
                lineStyle: {
                    width: 48,
                    opacity: 0.3,
                    color: '#00ff'
                },
            },
            {
                type: 'line3D',
                data: dataCasingTwo,
                // 变得圆滑
                smooth: true,
                // 隐藏折点
                showSymbol: false,
                name: "二开套管",
                lineStyle: {
                    width: 37,
                    opacity: 0.3,
                    color: '#FF0FFF'  // 设置为绿色
                },
            },
            {
                type: 'line3D',
                data: dataCasingThree,
                // 变得圆滑
                smooth: true,
                // 隐藏折点
                showSymbol: false,
                name: "三开套管",
                lineStyle: {
                    width: 24,
                    opacity: 0.3,
                    color: '#008000'
                },
            },

            //顶视图数据
            {
                type: 'line',
                name: "井眼轨迹",
                lineStyle: {
                    color: '#000000',
                    width: 1,
                },
                xAxisIndex: 0,
                yAxisIndex: 0,
                color: '#000000',
                data: data,
                encode: {
                    x: 0,
                    y: 1,
                    tooltip: [0, 1]
                }
            },
            {
                type: 'line',
                name: "三开套管",
                lineStyle: {
                    color: '#008000',
                    width: 3,
                },
                color: '#008000',
                xAxisIndex: 0,
                yAxisIndex: 0,
                data: dataCasingThree,
                encode: {
                    x: 0,
                    y: 1,
                    tooltip: [0, 1]
                }
            },
            {
                type: 'line',
                name: "二开套管",
                lineStyle: {
                    color: '#FF0FFF',
                    width: 5,
                },
                color: '#FF0FFF',
                xAxisIndex: 0,
                yAxisIndex: 0,
                data: dataCasingTwo,
                encode: {
                    x: 0,
                    y: 1,
                    tooltip: [0, 1]
                }
            },
            {
                type: 'line',
                name: "一开套管",
                lineStyle: {
                    color: '#00ff',
                    width: 10,
                },
                color: '#00ff',
                xAxisIndex: 0,
                yAxisIndex: 0,
                data: dataCasingOne,
                encode: {
                    x: 0,
                    y: 1,
                    tooltip: [0, 1]
                }
            },

            //主视图数据
            {
                type: 'line',
                name: "井眼轨迹",
                lineStyle: {
                    color: '#000000',
                    width: 1,
                },
                xAxisIndex: 1,
                yAxisIndex: 1,
                color: '#000000',
                data: data,
                encode: {
                    x: 0,
                    y: 2,
                    tooltip: [0, 2]
                }
            },
            {
                type: 'line',
                name: "三开套管",
                lineStyle: {
                    color: '#008000',
                    width: 20,
                },
                color: '#008000',
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: dataCasingThree,
                encode: {
                    x: 0,
                    y: 2,
                    tooltip: [0, 2]
                }
            },
            {
                type: 'line',
                name: "二开套管",
                lineStyle: {
                    color: '#FF0FFF',
                    width: 40,
                },
                color: '#FF0FFF',
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: dataCasingTwo,
                encode: {
                    x: 0,
                    y: 2,
                    tooltip: [0, 2]
                }
            },
            {
                type: 'line',
                name: "一开套管",
                lineStyle: {
                    color: '#00ff',
                    width: 60,
                },
                color: '#00ff',
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: dataCasingOne,
                encode: {
                    x: 0,
                    y: 2,
                    tooltip: [0, 2]
                }
            },


            //左视图数据
            {
                type: 'line',
                name: "井眼轨迹",
                lineStyle: {
                    color: '#000000',
                    width: 1,
                },
                xAxisIndex: 2,
                yAxisIndex: 2,
                color: '#000000',
                data: data,
                encode: {
                    x: 1,
                    y: 2,
                    tooltip: [1, 2]
                }
            },
            {
                type: 'line',
                name: "三开套管",
                lineStyle: {
                    color: '#008000',
                    width: 20,
                },
                color: '#008000',
                xAxisIndex: 2,
                yAxisIndex: 2,
                data: dataCasingThree,
                encode: {
                    x: 1,
                    y: 2,
                    tooltip: [1, 2]
                }
            },
            {
                type: 'line',
                name: "二开套管",
                lineStyle: {
                    color: '#FF0FFF',
                    width: 40,
                },
                color: '#FF0FFF',
                xAxisIndex: 2,
                yAxisIndex: 2,
                data: dataCasingTwo,
                encode: {
                    x: 1,
                    y: 2,
                    tooltip: [1, 2]
                }
            },

        ]
    };
    //右视图
    const optionSide = {
        xAxis: { type: "value", name: "Z" },
        yAxis: { type: "value", name: "Y" },
        series: [
            {
                type: 'line',
                data: data,
                // 变得圆滑
                smooth: true,
                // 隐藏折点
                showSymbol: false,
                encode: {
                    x: 1,
                    y: 2,
                    tooltip: [1, 2]
                },
                lineStyle: {
                    opacity: 1,
                    color: '#000000',
                    width: 8,
                },
            },
            {
                type: 'line',
                data: dataCasingOne,
                // 变得圆滑
                smooth: true,
                // 隐藏折点
                showSymbol: false,
                encode: {
                    x: 1,
                    y: 2,
                    tooltip: [1, 2]
                },
                lineStyle: {
                    opacity: 0.5,
                    color: '#00ff',
                    width: 48,
                },
            },
            {
                type: 'line',
                data: dataCasingTwo,
                // 变得圆滑
                smooth: true,
                // 隐藏折点
                showSymbol: false,
                encode: {
                    x: 1,
                    y: 2,
                    tooltip: [1, 2]
                },
                lineStyle: {
                    opacity: 0.4,
                    color: '#0ff',
                    width: 37,
                },
            },
            {
                type: 'line',
                data: dataCasingThree,
                // 变得圆滑
                smooth: true,
                // 隐藏折点
                showSymbol: false,
                encode: {
                    x: 1,
                    y: 2,
                    tooltip: [1, 2]
                },
                lineStyle: {
                    opacity: 0.4,
                    color: '#FF0FFF',
                    width: 24,
                },
            },
        ]
    };
    //顶视图
    const optionTop = {
        xAxis: { type: "value", name: "x" },
        yAxis: { type: "value", name: "Y" },
        series: [
            {
                type: 'line',
                data: data,
                // 变得圆滑
                smooth: true,
                // 隐藏折点
                showSymbol: false,
                encode: {
                    x: 0,
                    y: 1,
                    tooltip: [0, 1]
                },
                lineStyle: {
                    opacity: 1,
                    color: '#000000',
                    width: 8,
                },
            },
            {
                type: 'line',
                data: dataCasingOne,
                // 变得圆滑
                smooth: true,
                // 隐藏折点
                showSymbol: false,
                encode: {
                    x: 0,
                    y: 1,
                    tooltip: [0, 1]
                },
                lineStyle: {
                    opacity: 0.5,
                    color: '#00ff',
                    width: 48,
                },
            },
            {
                type: 'line',
                data: dataCasingTwo,
                // 变得圆滑
                smooth: true,
                // 隐藏折点
                showSymbol: false,
                encode: {
                    x: 0,
                    y: 1,
                    tooltip: [0, 1]
                },
                lineStyle: {
                    opacity: 0.4,
                    color: '#0ff',
                    width: 37,
                },
            },
            {
                type: 'line',
                data: dataCasingThree,
                // 变得圆滑
                smooth: true,
                // 隐藏折点
                showSymbol: false,
                encode: {
                    x: 0,
                    y: 1,
                    tooltip: [0, 1]
                },
                lineStyle: {
                    opacity: 0.4,
                    color: '#FF0FFF',
                    width: 24,
                },
            },
        ]
    };
    //左视图
    const optionLeft = {
        xAxis: { type: "value", name: "x" },
        yAxis: { type: "value", name: "Y" },
        series: [
            {
                type: 'line',
                data:data,
                // 变得圆滑
                smooth: true,
                // 隐藏折点
                showSymbol: false,
                encode: {
                    x: 0,
                    y: 2,

                },
                lineStyle: {
                    opacity: 1,
                    color: '#000000',
                    width: 8,
                },
            },
            {
                type: 'line',
                data: dataCasingOne,
                // 变得圆滑
                smooth: true,
                // 隐藏折点
                showSymbol: false,
                encode: {
                    x: 0,
                    y: 2,
                    tooltip: [0, 2]
                },
                lineStyle: {
                    opacity: 0.5,
                    color: '#00ff',
                    width: 48,
                },
            },
            {
                type: 'line',
                data: dataCasingTwo,
                // 变得圆滑
                smooth: true,
                // 隐藏折点
                showSymbol: false,
                encode: {
                    x: 0,
                    y: 2,
                    tooltip: [0, 2]
                },
                lineStyle: {
                    opacity: 0.4,
                    color: '#0ff',
                    width: 37,
                },
            },
            {
                type: 'line',
                data: dataCasingThree,
                // 变得圆滑
                smooth: true,
                // 隐藏折点
                showSymbol: false,

                encode: {
                    x: 0,
                    y: 2,
                    tooltip: [0, 2]
                },
                lineStyle: {
                    opacity: 0.4,
                    color: '#FF0FFF',
                    width: 24,
                },
            },
        ]
    };
    chart.setOption(optionLeft)
};



</script>
  
<style>
/* 样式可以根据需要自行调整 */
</style>
  